<template>
  <div>
   <div>课程列表</div> 
  <div class="classList" >
<div class="class" v-for="item in myarr" :key="item.id" >
    
<div class="id">ID:{{item.id}}</div>
<img src= '../../../assets/iconfont/04课程管理/kecheng-picture01.png'  alt="">
 <p> {{item.classname}} </p>
 <p>报名费:{{item.price}}￥</p>
 <p>销量:{{item.sall}}</p>
 <p>上传人:{{item.autor}}</p>
 <p>上传时间:{{item.time}}</p>

<div>
    <button  @click="opendalog({price:item.price,sall:item.sall,peple:item.autor,time:item.time,id:item.id,classname:item.classname})">编辑</button>
    <button :class="item.id" @click="deletehander" id="del">删除</button> 
 </div>

</div>

  </div>

  </div>
</template>

<script>

import {deleteFunctonById} from '../../../api/classApi'

export default {
props:['myarr'],

 data(){
    return{
      images:[
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture01.png')},
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture02.png')},
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture03.png')},
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture04.png')},
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture05.png')},
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture06.png')},
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture07.png')},
{src:require('../../../assets/iconfont/04课程管理/kecheng-picture08.png')},
      ],
        // item02:require("../../../assets/iconfont/04课程管理/kecheng-picture02.png"),
        // item03:require("../../../assets/iconfont/04课程管理/kecheng-picture03.png"),
        // item04:require("../../../assets/iconfont/04课程管理/kecheng-picture04.png"),
        // item05:require("../../../assets/iconfont/04课程管理/kecheng-picture05.png"),

        arr:[],
       
           
   }
   
      
   
 },

mounted(){
this.getData()
},
 methods:{
  getData(){
this.arr = this.myarr
console.log("lll",this.arr)
  },

// 删除单个
deletehander(e){
if(e.target.id !=="del") return
//  console.log(e.target.className);
//  发送请求,向后端传输id进行数据删除
deleteFunctonById({id:e.target.className}).then(res=>{
  // console.log(res);
if(res.code == 200){
  // 刷新表格  调用父组件里面的请求重新发送请求刷新页面
  this.$emit('resetList')  //重新执行刷新页面,把事件传递个父组件刷新页面

}

})


},
// 弹框显示函数
opendalog(val){
  console.log(val);
this.$emit('opendalogfn',val)
}

}


}
</script>

<style lang='less' scoped>

.classList{
 display: flex;
 align-content: space-between;
 flex-wrap: wrap;

}

.class{
    width: 290px;
    height: 300px;
    background-color: #fff;
    padding: 8px 12px;
    margin-left:20px;
    margin-top: 20px;
    box-sizing: border-box;
    
}
.class>.img{
       width: 266px;
    }


</style>